<template>
	<div class="search">
		<el-card class="search-view" shadow="hover">
			<template #header>
				<h4>关键词搜索</h4>
				<el-dropdown>
					<span class="el-dropdown-link">
						<el-icon class="el-icon--right">
							<MoreFilled />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item>目录1</el-dropdown-item>
							<el-dropdown-item>目录2</el-dropdown-item>
							<el-dropdown-item>目录3</el-dropdown-item>
							<el-dropdown-item disabled>目录4</el-dropdown-item>
							<el-dropdown-item disabled>目录5</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</template>
			<div class="search-chart">
				<div class="search-chart-line">
					<h5 class="line-title">搜索用户数</h5>
					<div class="line-count">{{ numberFormat(lineChartData.uTotal) }}</div>
					<v-chart
						:option="getLineOption('countList', '搜索用户数')"
						autoresize
					></v-chart>
				</div>
				<div class="search-chart-line">
					<h5 class="line-title">搜索量</h5>
					<div class="line-count">{{ numberFormat(lineChartData.cTotal) }}</div>
					<v-chart
						:option="getLineOption('countList', '搜索量')"
						autoresize
					></v-chart>
				</div>
			</div>
			<el-table :data="tableData">
				<el-table-column
					label="排名"
					prop="rankNo"
					width="60"
				></el-table-column>
				<el-table-column label="关键字" prop="word"></el-table-column>
				<el-table-column label="搜索数量" prop="count"></el-table-column>
				<el-table-column label="搜索用户比" prop="user"></el-table-column>
				<el-table-column label="搜索占比" prop="rang"></el-table-column>
			</el-table>
			<el-pagination
				layout="prev,pager,next"
				:total="tableTotalData.length"
				v-model:current-page="currentPage"
				:page-size="pageSize"
			/>
		</el-card>
		<el-card class="search-view" shadow="hover">
			<template #header>
				<h4>分类销售排行</h4>
				<el-radio-group v-model="tabPosition">
					<el-radio-button label="商品" size="small">商品</el-radio-button>
					<el-radio-button label="分类" size="small">分类</el-radio-button>
				</el-radio-group>
			</template>
			<div class="search-pie">
				<v-chart :option="getPieOption()" autoresize></v-chart>
			</div>
		</el-card>
	</div>
</template>

<script lang="ts">
export default {
	name: 'BottomView',
}
</script>

<script lang="ts" setup>
import useFormat from '@/hooks/useFormat'
import { MoreFilled } from '@element-plus/icons-vue'
import { useReportDataStore } from '@/stores/reportData'
import { ref, computed } from 'vue'

const { numberFormat } = useFormat()
const reportDataStore = useReportDataStore()
const tabPosition = ref('商品')
const currentPage = ref(1)
const pageSize = ref(5)
// 搜索关键字
const searchWord = computed(() => reportDataStore.reportData.searchWord)

const tableTotalData = computed(() => {
	if (!searchWord.value) return []
	return searchWord.value.map((item, index) => {
		return {
			...item,
			rankNo: index + 1,
			rang: ((item.user / item.count) * 100).toFixed(2) + '%',
		}
	})
})
// 分页
const tableData = computed(() => {
	return tableTotalData.value.slice(
		(currentPage.value - 1) * pageSize.value,
		currentPage.value * pageSize.value
	)
})
// left
const lineChartData = computed(() => {
	const data = {
		wordList: [] as string[],
		userList: [] as number[],
		countList: [] as number[],
		uTotal: 0,
		cTotal: 0,
	}
	if (tableTotalData.value && tableTotalData.value.length > 0) {
		tableTotalData.value.forEach((item) => {
			data.wordList.push(item.word)
			data.userList.push(item.user)
			data.countList.push(item.count)
			data.cTotal += item.count
			data.uTotal += item.user
		})
	}
	return data
})
// left参数
const getLineOption = (listName: 'userList' | 'countList', name: string) => {
	return {
		xAxis: {
			boundaryGap: false,
			data: lineChartData.value.wordList,
		},
		yAxis: {
			show: false,
		},
		grid: {
			left: 0,
			top: 0,
			bottom: 0,
			right: 0,
		},
		series: {
			type: 'line',
			data: lineChartData.value[listName],
			smooth: true,
			itemStyle: {
				opacity: 0,
			},
			lineStyle: {
				color: '#5fbbff',
			},
			areaStyle: {
				color: '#c7e7ff',
			},
		},
		tooltip: {
			trigger: 'axis',
			confine: true,
		},
	}
}
// 饼状图数据
const saleRank = computed(() => reportDataStore.reportData.saleRank)

// 处理饼状图
const pieChartData = computed(() => {
	const data = {
		categoryList: [] as any[],
		goodsList: [] as any[],
		cTotal: 0,
		gTotal: 0,
	}
	if (!saleRank.value) return {} as any
	const {
		category: { axisX, data1 },
		goods: { axisX: axisX2, data1: data2 },
	} = saleRank.value
	//统计分类和商品总数
	const total1 = data1.reduce((prev, item) => prev + item, 0)
	data.cTotal = total1
	const total2 = data2.reduce((prev, item) => prev + item, 0)
	data.gTotal = total2

	axisX.forEach((item, index) => {
		const percent = ((data1[index] / total1) * 100).toFixed(2) + '%'
		data.categoryList.push({
			name: item + '|' + percent,
			value: data1[index],
			percent,
			labelName: item,
		})
	})
	axisX2.forEach((item, index) => {
		const percent = ((data2[index] / total2) * 100).toFixed(2) + '%'
		data.goodsList.push({
			name: item + '|' + percent,
			value: data2[index],
			percent,
			labelName: item,
		})
	})
	return data
})
// 饼状图参数
const getPieOption = () => {
	const { categoryList, goodsList, cTotal, gTotal } = pieChartData.value
	const list = tabPosition.value === '商品' ? goodsList : categoryList
	const total = tabPosition.value === '商品' ? gTotal : cTotal
	return {
		title: [
			{
				text: `${tabPosition.value}分布`,
				textStyle: {
					fontSize: 14,
					color: '#666',
				},
				left: 20,
			},
			{
				text: '累计订单量',
				left: '34%',
				top: '44%',
				textStyle: {
					fontSize: 14,
					color: '#666',
				},
				subtext: total,
				subtextStyle: {
					fontSize: 28,
				},
				textAlign: 'center',
			},
		],
		tooltip: {
			trigger: 'item',
			formatter: (params: any) => {
				return `${tabPosition.value}分布<br />
				${params.marker} ${params.data.labelName}<br/>
				${params.marker} 数量: ${params.data.value}<br/>
				${params.marker} 占比: ${params.data.percent}
				`
			},
		},
		legend: {
			top: 'center',
			left: '70%',
		},
		series: [
			{
				name: '数据表',
				type: 'pie',
				center: ['35%', '53%'],
				radius: ['40%', '56%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 2,
				},
				label: {
					position: 'outside',
					formatter: (params: any) => {
						return params.data.labelName
					},
				},
				labelLine: {
					length: 7,
					length2: 5,
				},
				data: list,
			},
		],
	}
}
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	.search-view {
		flex: 1;
		cursor: pointer;
		:deep(.el-card__header) {
			padding: 0 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			h4 {
				font-weight: 500;
			}
		}

		&:first-child {
			margin-right: 10px;
			.search-chart {
				.search-chart-line {
					display: inline-block;
					width: 50%;
					&:first-child {
						padding-right: 5px;
					}
					&:last-child {
						padding-left: 5px;
					}
					h5 {
						padding: 0;
						margin: 0;
						color: #999;
					}
					.line-count {
						font-size: 24px;
						letter-spacing: 1px;
					}
					.echarts {
						height: 50px;
					}
				}
			}
		}
		&:last-child {
			margin-left: 10px;
			.search-pie {
				height: 400px;
			}
		}
	}
}
</style>
